import React from 'react';
import styled from 'styled-components';
import useBasisCash from '../../../hooks/useBasisCash';
import { Bank } from '../../../basis-cash';

interface LPCardProps {
  bank: Bank;
}

const LPCard: React.FC<LPCardProps> = ({
  bank
}) => {
  const basisCash = useBasisCash();
  const [apy,setApy] = React.useState('');
  React.useEffect(()=>{
    basisCash.getAPY2(bank.contract, bank.depositToken)
    .then(res=>{
      let num = (parseFloat(res)*100).toFixed(2);
      setApy(num+'%');
    })
  },[]);
  return (
    <DivFlexspan>{bank.depositTokenName}年化收益率 : <DivFlexspan1>{apy}</DivFlexspan1></DivFlexspan>
  );
};

const DivFlexspan = styled.span`
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 40px;
  @media (max-width: 768px) {
    font-size: 12px;
  }
`

const DivFlexspan1 = styled.span`
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #2FEA99;
`;

export default LPCard;
